import React from 'react';
import PropTypes from 'prop-types';

import iconApple from '../../assets/images/apple.png';

export default class AppleListItem extends React.Component {
  static propTypes = {
    apple: PropTypes.object.isRequired,
    onHandleClick: PropTypes.func,
  }

  static defaultProps = {
    apple: {},
    onHandleClick: () => {},
  }

  render() {
    const { apple } = this.props;
    const { id, name, weight } = apple;

    return (
      <div className="apple__list__item">
        <div className="apple__image"><img src={iconApple} alt="" /></div>
        <div className="apple__info">
          <h3 className="apple__name">{name} - {id}号</h3>
          <p className="apple__features">{weight}克</p>
        </div>
        <div className="apple__action">
          <button
            className="button"
            onClick={() => { this.props.onHandleClick(id); }}
          >
            吃掉
          </button>
        </div>
      </div>
    );
  }
}
